<template>
  <div class="coupon_list white_bg">
      <a @click="detail(merchInfo)">
        <div class="coupon_img">
          <img v-lazy="merchInfo.mchtLogUrl">
        </div>
        <div class="coupon_info" v-if="showInner">
          <div class="coupon_info_tit"><b>{{merchInfo.mchtName}}</b></div>
          <div class="coupon_info_item">
            <coupon-star :couponComScore="merchInfo.mchtComScore"></coupon-star>
            <span style="float:left;margin: 0.1rem 0 0 0.4rem;">{{merchInfo.mchtComNum}}条</span>
            <p class="info_r">
              {{merchInfo.mchtArea}} {{merchInfo.distance | setDistance}}
            </p>
          </div>

          <div class="clear"></div>
          <div class="coupon_info_item">
            <p class="right red_color">￥{{merchInfo.mchtPer}}/人</p>
            <p class="left">{{merchInfo.mchtTypeValue}}</p>
          </div>
          <div class="coupon_info_item">{{merchInfo.mchtAddr}}</div>
        </div>
        <div v-if="!showInner" class="index_cp_info">
          <div class="index_cp_l">
            <p class="index_cp_tit">{{merchInfo.name }}</p>
            <p class="index_cp_star">
              <star :couponComScore="merchInfo.comScore"></star>
            </p>
            <p class="index_cp_txt">{{merchInfo.mchtTypeValue || oneCouponMer.mchtTypeValue}}<span class="pad_l">面值</span><span class="pad_l red_color">￥{{merchInfo.denomination | denomination(merchInfo.mchtTypeValue || merchInfo.type)}}</span></p>
            <p class="index_cp_txt">{{merchInfo.mchtArea || '无'}}<span class="pad_l"></span></p>
          </div>
          <div class="index_cp_r">
            <p class="index_cp_pri"><b>{{merchInfo.valuation}}</b>芸券</p>
            <p class="index_cp_bt">已发行 {{merchInfo.soldnum}}</p>
            <p class="index_cp_bt">已使用 {{merchInfo.soldnum}}</p>
          </div>
        </div>
      </a>
      <div class="clear"></div>

      <merch-coupon :couponName="merchInfo.couponName" :couponType="merchInfo.couponType" :denomination="merchInfo.denomination" :validatyEnd="merchInfo.validatyEnd"></merch-coupon>
  </div>
</template>

<script>
export default {
  data: () => ({
    showInner: true
  }),
  props: {
    merchInfo: {
      type: Object,
      defaut: () => ({})
    }
  },
  methods: {
    detail(info) {
      this.$router.push({
        name: 'merchDetail',
        query: {
          mchtId: info.mchtId
        }
      });
    }
  }
}
</script>

<style scoped>
  .coupon_list {
      box-shadow: 0 0.1rem 0.2rem rgba(100,100,100,.15);
      margin: 0 .667rem;
      margin-bottom: 1rem;
      border-radius: .2rem;
      position: relative;
      min-height: 7rem;
  }
</style>
